<template>
  <div class="login">
    <div class="login-box">
      <div class="login-logo">
         <img src="../assets/logo.png" alt="">
      </div>
        <el-form ref="myform" :rules="rules" :model="form" label-width="0px" size="medium" >
           <el-form-item prop="username">
              <el-input
                      placeholder="请输入内容"
                      prefix-icon="el-icon-search"
                      v-model="form.username"
                     >
              </el-input>
            </el-form-item>
         <el-form-item prop="password">
          <el-input
                  placeholder="请输入密码"
                  prefix-icon="el-icon-search"
                  v-model="form.password"
                  type="password"
                >
          </el-input>
         </el-form-item>
         <el-form-item class="login-right">
            <el-button type="primary" @click="loginform('myform')">登录</el-button>
            <el-button type="default" @click="resetForm('myform')">重置</el-button>
         </el-form-item>
        </el-form>

       </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetForm (ruleForm) {
      console.log(ruleForm)
      this.$refs[ruleForm].resetFields()
    },
    loginform (ruleForm) {
      this.$refs[ruleForm].validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('/login', this.form)
        console.log(res)
        window.sessionStorage.setItem('token', res.data.token)
        this.$router.push('/home')
      })
      // console.log(this.form)
    }

  }
}
</script>

<style>
  body{
    margin: 0;
    padding: 0;
  }
  .login{
    height:100%;
    background-color: #2b4b6b;
  }
  .login-box{
    width:400px;
    height: 300px;
    background-color: #fff;
    position:relative;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    box-shadow: 1px 1px 2px 4px #fff;
    box-sizing: border-box;
    /* overflow: hidden; */
  }
  .login-logo{
    width:130px;
    height:130px;
    border:1px solid gray;
    border-radius: 50%;
    padding:5px;
    box-sizing: border-box;
    position: absolute;
    left:50%;
    top:0;
    transform: translate(-50%,-50%);
    background-color: #fff;
    box-shadow: 1px 1px 2px 4px #fff;

  }
  .login-logo img{
    width: 100%;
    height:100%;
    border-radius: 50%;
    background-color: #ddd;
  }
  .el-form{
    width:100%;
    position: absolute;
    bottom:0px;
    box-sizing: border-box;
      /* margin-top: 200px; */
  }
  .login-right{
    display: flex;
    justify-content: flex-end;
    margin-right:10px;
  }

</style>
